<template>
	<main>
		<div class="wrap">
			<v-header></v-header>
			<div class="list" v-for="(v,i) in shopList">
				<h2>美团自营</h2>
				<div class="list-item">
					<div class="item-label">
						<span href="" :class="{active:v.check}" @click="singeShopSelect(v)"></span>
					</div>
					<div class="item-img"><img :src="v.shopImage" height="-1" width="-1" alt=""></div>
					<div class="item-info">
						<p>{{v.shopName}}</p>
						<div class="play">
							<div class="play-price"><span class="one-price">{{v.shopPrice | moneyFormat }}</span><span class="all-price">{{v.shopPrice*v.shopNumber| moneyFormat }}</span></div>
							<div>
								<span @click="showPanel(v)">删除</span>
							<div class="play-num"><span class="minu" @click="singeShopPrice(v,false)">-</span><input type="number" value="v.shopNumber" v-model="v.shopNumber"><span class="add" @click="singeShopPrice(v,true)">+</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="qx">
					<span class="bg" :class="{active:isAllSelect}" @click="selectAll(isAllSelect)"></span>
					<span>全选</span>
				</div>
				<div class="pay">
					<span>合计:</span>
					<span class="all-price">{{totalPrice|moneyFormat}}</span>
				</div>
				<div class="pay-btn">
					<button>结算</button>
				</div>
			</div>
			<div class="panel" :class="{panelactive:isPanelActive}">
				<div class="mask"></div>
				<div class="">
					<div class="warnMsg">确定要删除这个宝贝吗？</div>
					<div class="btn-group">
						<button @click="sureDel(v)">确定</button>
						<button @click="delPanel()">取消</button>
					</div>
				</div>
			</div>
		</div>
	</main>
</template>
<script>
	import vheader from "./headerx.vue"
	export default{
		name:"car",
		data(){
			return {
				shopList:"",
				isAllSelect:false,
				totalPrice:0,
				isPanelActive:true,
				currentShop:""
			}
		},
		methods:{
			singeShopPrice(shop,t){
				if(t){
					shop.shopNumber++;
				}else{
					if(shop.shopNumber<=1){
						shop.shopNumber=1;
						return ;
					}
					shop.shopNumber--;
				}

				this.getAllShopPrice();

			},
			selectAll(flag){
				this.isAllSelect=!flag;
				this.shopList.forEach(function(value,index){
					if(value.check==="undefined"){
						this.$set(value,check,!flag);		//vue中向对象中添加属性的方法
					}else{
						value.check=!flag;
					}
				})
				this.getAllShopPrice();
			},
			getAllShopPrice(){
				let price=0;
				this.shopList.forEach(function(value,index){
					if(value.check){
						price+=value.shopPrice*value.shopNumber;
					}
				})
				this.totalPrice=price;
			},
			singeShopSelect(shop){
				if(typeof shop.check==="undefined"){
					this.$set(shop,'check',true);
				}else{
					shop.check=!shop.check;
				}
				this.getAllShopPrice();
				this.hasSelectAll();
			},
			hasSelectAll(){
				let flag=true;
				this.shopList.forEach(function(value,index){
					if(!value.check){
						flag=false;
					}
				})
				this.isAllSelect=flag;
			},
			showPanel(v){
				this.isPanelActive=!this.isPanelActive;
				this.currentShop=v;
			},
			delPanel(){
				this.isPanelActive=!this.isPanelActive;
			},
			sureDel(shop){
				this.isPanelActive=!this.isPanelActive;
				let num=this.shopList.lastIndexOf(this.currentShop);
				this.shopList.splice(num,1);
				this.getAllShopPrice();
			}
		},
		components:{
			"v-header":vheader
		},
		mounted(){
			this.$store.state.title="购物车";
			this.$http.get("./static/data/cart.json").then(function(res){
				this.shopList=res.body.allShops.shopList;
				console.log(this.shopList);
			});
		},
		filters:{
			moneyFormat(n){
				return "￥"+n.toFixed(2);
			}
		}
	}
</script>
<style scoped>
.wrap{
	margin-bottom: 1.2rem;
}
.panel{
    position: absolute;
    width: 7.2rem;
    z-index: 4;
    background: red;
    top: 5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.74);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
}
.panel .warnMsg{
	font-size:.4rem;
	text-align:center;
	background: white;
    padding: .2rem;
}
.panel .btn-group{
    text-align: center;
    line-height: .4rem;
    display:flex;
}
.panel .btn-group button{
    width: 50%;
    height: 100%;
    background: white;
    border: none;
    outline: none;
    border-top: 1px solid #ccc;
    padding: .2rem;
}
.panel .btn-group button:first-child{
	border-right:1px solid #ccc;
}
.panelactive{
	display:none;
}
.list{
	width: 100%;
	background: white;
	margin-top: .2rem;
}
.list h2{
    font-size: .38rem;
    border-bottom: 1px solid #f0efed;
    padding: .1rem;
    font-weight: normal;
    color: black;
}
.list .list-item{
	width: 100%;
	display: flex;
}
.list .item-label{
    width: .8173rem;
    position: relative;
    text-align: center;
    line-height: 1.8173rem;
}
.list .item-label span{
    display: inline-block;
    width: .52rem;
    height: .52rem;
    cursor: pointer;
    background: url('../assets/images/label1.png');
    background-size: .52rem;
}
.list .item-label span.active{
    background: url('../assets/images/label2.png');
	background-size: .52rem;
}
.list .item-img{
    width: 2.6rem;
    margin: .16rem 0 .16rem .32rem;
    background: #fff;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.list .item-img img{
	width:100%;
}
.list .item-info{
    flex: 1;
    padding: .16rem .32rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-justify-content: space-between;
    font-size: .28rem;  
}
.list .play{
	/* display: flex; */
    margin-top: .4rem;
}
.list .play-price{
	flex-grow: 1;
	padding: .1rem 0;
    margin: .4rem 0;
}
.all-price{
	color: #f60;
}
.list .one-price{
	float: right;
}
.list .play-num{
	float: right;
}
.list .play-num input{
    width: 0.3rem;
    text-align: center;
}
.list .play-num  span{
    width: .48rem;
    height: 100%;
    color: #0c3146;
    display: inline-block;
    text-align: center;
    font-size: .4rem;
}
.footer{
    height: 1rem;
   position: fixed;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 0;
 	background-color: #FFF;
 	display: flex;
 	font-size: .28rem;
 	line-height: 1rem;
 	padding-left: .2rem;
}
.footer .qx .bg{
	display: inline-block;
    width: .52rem;
    height: .53rem;
    cursor: pointer;
    background: url('../assets/images/label1.png');
    background-size: .52rem;
    position: relative;
    top: .2rem;
    margin-right: .2rem;
}
.footer .qx .active{
    background: url('../assets/images/label2.png');
	background-size: .52rem;
}
.footer .pay{
    width: 50%;
    text-align: right;
}
.footer .pay-btn{
    flex-grow: 1;
    margin-left: .2rem;
}
.footer .pay-btn button{
	width: 100%;
	height: 100%;
    color: #fff;
    background: #f50;
    margin-left: .2rem;
	border: none;
    outline: none;
}

</style>